import { RewardLog } from '@/apis/draw';
import MyPrizeButton from '@/assets/my-button.png';
import RuleButton from '@/assets/rule-button.png';
import useMyPrize from '@/pages/draw/components/useMyPirze';
import classNames from 'classnames';
import { useQuery } from 'umi';
import useRules from './useRules';

export default function FixedButtons() {
  const { renderNode: renderRulesNode, open: openRule } = useRules();
  const { renderNode: renderMyPrizeNode, open: openMyPrize } = useMyPrize();

  // ?获取中奖记录
  const { data: reward, refetch: refetchRecord } = useQuery(
    ['get:reward:log'],
    () => RewardLog(),
  );

  return (
    <>
      {/* 活动规则 */}
      <button
        className="w-[136px] h-[39px] bg-cover absolute right-0 top-[100px] z-10"
        style={{
          backgroundImage: `url(${RuleButton})`,
        }}
        onClick={() => openRule()}
      />

      {/* 我的奖品 */}
      {Boolean(reward?.length) && (
        <button
          onClick={() => openMyPrize()}
          style={{
            backgroundImage: `url(${MyPrizeButton})`,
          }}
          className={classNames(
            'w-[136px] h-[47px] absolute right-0 top-[140px] bg-cover z-10 active:scale-95',
          )}
        />
      )}

      {renderRulesNode()}
      {renderMyPrizeNode()}
    </>
  );
}
